<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐视视频首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3967893_l3mb3uh9kc.css">
</head>
<script src="./js/jquery.min.js"></script>
<style>
    #swiper-1 img {
        width: 100%;
        height: 460px;
    }

    #Swiper-2 img {
        width: 100%;
        height: 348px;
    } 
</style>

<body>
    <!-- 大框架 -->
    <div id="le">
        <!-- 头部区域 -->
        <div class="header ">
            <!-- 头部导航栏 -->
            <div class="header-nav">
                <!-- logo区域 -->
                <div class="logo"></div>
                <!-- 中间搜索 -->
                <div class="form">
                    <i class="iconfont icon1">&#xe651;</i>
                    <input type="text" placeholder="神探狄仁杰[热播]">
                    <div class="rank-outer">
                        <!-- 点击搜索框出现一个框 -->
                        <ul class="rank">
                            <h4>热门搜索</h4>
                            <li>
                                <i class="num">1</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num2">2</i>
                                <p class="rank-p">黄金大劫案</p>
                            </li>
                            <li>
                                <i class="num3">3</i>
                                <p class="rank-p">三生三世十里桃花</p>
                            </li>
                            <li>
                                <i class="num4">4</i>
                                <p class="rank-p">赵四</p>
                            </li>
                            <li>
                                <i class="num4">5</i>
                                <p class="rank-p">尼古拉斯</p>
                            </li>
                            <li>
                                <i class="num4">6</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num4">7</i>
                                <p class="rank-p">青春烈火</p>
                            </li>
                            <li>
                                <i class="num4">8</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num4">9</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num4">10</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                        </ul>
                    </div>
                   
                    <a href="" class="iconfont icon2">&#xe61c;</a>
                    <button>搜索</button>
                </div>
                <!-- 导航区域右边的四个 -->
                <div class="user">
                    <div class="user-item">
                        <a href="" class="nav-a">
                            <i class="iconfont icon3">&#xe604;</i>
                            <span>开通会员</span>
                        </a>
                    </div>
                    <div class="user-item">
                        <a href="" class="nav-a">
                            <i class="iconfont icon3">&#xe600;</i>
                            <span>消息</span>
                            <div class="news">
                                <div class="triangle"></div>
                                <div class="news-inner">
                                    <ul class="options d_flex">
                                        <li class="show" data-index="0">活动</li>
                                        <li data-index="1">我的</li>
                                    </ul>
                                    <div class="content show">
                                        <div class="content-inner show">
                                            <img src="https://i0.letvimg.com/lc06_user/201611/09/10/34/2016110910343972182.jpg" alt="">
                                            <span>会员独享霍尼韦尔高端空净双十一爆底价减500元！..</span>
                                        </div>
                                        <div class="content-inner">
                                            <img src="https://i0.letvimg.com/lc06_user/201611/09/10/34/2016110910343972182.jpg" alt="">
                                            <span>乐视11月智能生态季，乐视商城配件跳水直降，全场..</span>
                                        </div>
                                        <p>【乐次元影视会员双11福利】乐次元脱单上上签，抽签100%有奖，奖品最低..</p>
                                        <div class="more">更多<i class="iconfont">&#xe678;</i></div>
                                    </div>
                                    <div class="content">
                                        <div class="content-inner2">
                                        <p>登录后才能查看全部消息哦～</p>
                                        <button>立即登录</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="user-item">
                        <a href="" class="nav-a">
                            <i class="iconfont icon3">&#xe6df;</i>
                            <span>看过</span>
                            <!-- 鼠标滑过显示的内容 -->
                        <div class="record">
                            <div class="triangle"></div>
                            <div class="record-inner">
                                <p>播放记录为空</p>
                                <p>登陆后可同步移动设备和TV端播放记录，观看更方便哦～</p>
                                <button>立即登录</button>
                            </div>
                        </div>
                        </a>
                        
                    </div>
                    <div class="user-item">
                        <a href="" class="nav-a">
                            <i class="iconfont icon3">&#xe60c;</i>
                            <span>未登录</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="header-swiper">
                <div class="swiper" id="swiper-1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="	https://i3.letvimg.com/lc04_iscms/202303/22/14/52/f37cb54cb91a401bba279244c361af8f.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://i1.letvimg.com/lc05_iscms/202303/21/17/19/85cf6c260fe643b8ba89d16a31eeacf1.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://i3.letvimg.com/lc07_iscms/202302/23/20/02/41e80797e3ac4d139da4caa256d0993f.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="	https://i2.letvimg.com/lc04_iscms/202303/19/10/34/e7faa6dbd31e412b9f636b2be97ca9da.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="	https://i3.letvimg.com/lc04_iscms/202303/22/14/52/f37cb54cb91a401bba279244c361af8f.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="	https://i2.letvimg.com/lc04_iscms/202303/21/17/21/6b94bb2a055b4a4b992f9ebb3f09aafc.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://i1.letvimg.com/lc03_iscms/202303/15/15/15/3efe26f327e5499a8ce3114b3df8effa.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://i0.letvimg.com/lc06_iscms/202302/13/15/49/e8f2bdd7aea546f385fb60461ca63827.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="	https://i0.letvimg.com/lc03_iscms/202303/21/14/31/293d5c7ace1d4ff1a928cbfc3f4c0584.jpg"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="	https://i2.letvimg.com/lc04_iscms/202303/19/10/34/e7faa6dbd31e412b9f636b2be97ca9da.jpg"
                                alt="">
                        </div>

                    </div>
                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div> -->
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- 头部的列表区域 -->
            <!-- <div class="header-list">
                <ul>
                    <li>蝶影：魏大勋冯越演绎热血特工</li>
                    <li>黄金大劫案：杜淳马苏热血救国</li>
                    <li>守护丽人：张译变身胡同暖男</li>
                    <li>中国乒乓：邓超绝地反击</li>
                    <li>东海客栈：敌后武工队锄奸杀寇</li>
                    <li>忍者神龟：神龟集结共抗强敌</li>
                    <li>绝杀：丁勇岱粉碎日寇核计划</li>
                    <li>北京傲客：北漂青年故事</li>
                    <li>生死翻盘：吴其江踏上特工之路</li>
                    <li>花开半夏：李沁林雨申为爱痴狂</li>
                </ul>
            </div> -->

        </div>
        <!-- 中间的主体部分 -->
        <div class="main center">
            <!-- 轮播图下边的块区域 -->
            <div class="screenBox">
                <div class="screenBox1">
                    <ul class="screenBox1-1">
                        <li class="font-weight">电视剧</li>
                        <li>古装</li>
                        <li>都市</li>
                        <li>爱情</li>
                        <li class="font-weight">自制剧</li>
                        <li>战争</li>
                        <li>武侠</li>
                        <li>谍战</li>
                    </ul>
                    <ul class="screenBox1-2">
                        <li class="font-weight">电影</li>
                        <li>喜剧</li>
                        <li>动作</li>
                        <li>警匪</li>
                        <li>科幻</li>
                        <li>冒险</li>
                    </ul>
                    <ul class="screenBox1-3">
                        <li class="font-weight">综艺</li>
                        <li>情感</li>
                        <li>明星</li>
                        <li class="font-weight">动漫</li>
                        <li>音乐</li>
                        <li>生活</li>
                    </ul>
                </div>
                <div class="screenBox2">
                    <ul class="screenBox2-1">
                        <li>乐视商城</li>
                        <li>超级电视</li>
                        <li>融创乐园</li>
                        <li>乐视APP下载</li>
                    </ul>
                </div>
                <div class="screenBox3">
                    <p class="font-weight"><i class="iconfont icon4">&#xe604;</i><span>会员专区</span></p>
                    <ul class="screenBox3-1">
                        <li>热映大片</li>
                        <li>开通会员</li>
                    </ul>

                </div>
            </div>
            <!-- 党建专区 -->
            <div class="column">
                <div class="title">
                    <h1>党建专区</h1>
                </div>
                <div class="column-box">
                    <!-- 列表的左边轮播图 -->
                    <div class="column-left">
                        <div class="swiper" id="Swiper-2">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="https://i0.letvimg.com/lc04_iscms/202303/21/09/53/60abeadfe38e471784f631155afdb8f6.jpg"
                                        alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://i2.letvimg.com/lc03_iscms/202303/10/14/11/a4415cf3fd9b47c498b2bd3f31ecb089.jpg"
                                        alt="">
                                </div>
                            </div>

                            <div class="swiper-button-prev">
                                <i class="iconfont icon5">&#xe67c;</i>
                            </div>
                            <div class="swiper-button-next">
                                <i class="iconfont icon5">&#xe678;</i>
                            </div>
                        </div>
                    </div>
                    <!-- 列表右边的四部分 -->
                    <div class="column-right">
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <img src="https://i0.letvimg.com/lc03_isvrs/202303/22/16/22/0bba0f7b-0eca-48f3-befc-ea2e22ab5736/thumb/2_400_225.jpg"
                                        alt="">
                                </div>

                                <p>习近平同俄罗斯总统普京举行会谈</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <img src="https://i0.letvimg.com/lc03_isvrs/202303/22/16/22/0bba0f7b-0eca-48f3-befc-ea2e22ab5736/thumb/2_400_225.jpg"
                                        alt="">
                                </div>

                                <p>习近平出席俄罗斯总统举行的欢迎仪式</p>
                            </div>
                        </div>
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <img src="https://i2.letvimg.com/lc02_isvrs/202303/22/09/19/54d5ab97-5a3d-4abc-884f-e67b2ab7dad3/thumb/2_400_225.jpg"
                                        alt="">
                                </div>

                                <p>习近平：中方始终坚定站在和平一边 站在对话一边 站在历史正确一边</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <img src="https://i0.letvimg.com/lc04_isvrs/202303/22/09/57/2792ace7-249e-40f3-bf45-f9cd1444eaf8/thumb/2_400_225.jpg"
                                        alt="">
                                </div>

                                <p>习近平将同俄罗斯总统普京举行大范围会谈</p>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!-- 今日热点 -->
            <div class="column">
                <div class="title">
                    <h1>今日焦点</h1>
                </div>
                <div class="column-box">
                    <!-- 列表的左边图 -->
                    <div class="column-left">
                        <div class="inner-img">
                            <div class="jishu">
                                <h5>抗日奇侠</h5>
                                <p><span>手撕鬼子</span><b>全40集</b></p>
                            </div>
                            <img src="https://i2.letvimg.com/lc07_iscms/202303/02/10/41/74d31086f064431087c6cb23f4614c73.jpg"
                                alt="">
                        </div>

                    </div>
                    <!-- 列表右边的四部分 -->
                    <div class="column-right">
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <img src="https://i0.letvimg.com/lc07_iscms/202211/03/10/54/62c3fd9b14f74afd86374a93a00a3566.png"
                                        alt="">
                                </div>
                                <h3>金婚</h3>
                                <p class="inner-p">张国立蒋雯丽平淡见真情</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <img src="https://i2.letvimg.com/lc03_iscms/202303/27/20/57/b38a7173a6ca4fadae37bb44f45e39ed.jpg"
                                        alt="">
                                </div>
                                <h3>理发师</h3>
                                <p class="inner-p">李晨王丽坤演绎乱世爱情</p>
                            </div>
                        </div>
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <img src="https://i3.letvimg.com/lc07_iscms/202211/03/11/35/6f428310f2d442a485dac73805820274.jpg"
                                        alt="">
                                </div>
                                <h3>隋唐英雄2</h3>
                                <p class="inner-p">刘晓庆演绎霸气萧后</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <img src="https://i0.letvimg.com/lc03_isvrs/202208/12/13/34/5c461675-9f3b-4ddb-a3a4-debdbcdd9968/thumb/2_400_225.jpg"
                                        alt="">
                                </div>
                                <h3>双城生活</h3>
                                <p class="inner-p">北京媳妇vs上海煮夫</p>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!-- 重磅热播 -->
            <div class="column">
                <div class="title">
                    <h1>重磅热播</h1>
                </div>
                <div class="column-box">
                    <div class="column-box2">
                        <div class="imgbox">
                            <div class="vip">
                                <b>付费</b>
                            </div>
                            <img src="https://i1.letvimg.com/lc06_iscms/202304/10/11/11/2082713f391943eaa8c88baf521cf5f3.gif"
                                alt="无名">
                        </div>
                        <h3>无名</h3>
                        <p class="inner-p">梁朝伟，王一博上演谍战大戏</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <div class="vip">
                                <b>会员</b>
                            </div>
                            <img src="https://i2.letvimg.com/lc02_iscms/202304/14/17/02/66e0d96299a94a84a67b492605456fa3.jpg"
                                alt="守护者">
                        </div>
                        <h3>守护者·更新</h3>
                        <p class="inner-p">张洪睿抗战守护宝藏</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <div class="vip">
                                <b>会员</b>
                            </div>
                            <img src="https://i1.letvimg.com/lc07_iscms/202304/14/16/54/99edffe13cc34a94bff226a9a6459654.jpg"
                                alt="">
                        </div>

                        <h3>正者无敌·抗战</h3>
                        <p class="inner-p">陈数霸气演绎司令夫人</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc06_iscms/202304/15/00/14/24838a0fbbbc4d5c9a23f3c1d6d706a0.gif"
                                alt="">
                        </div>

                        <h3>库尔班大叔和他的子孙们</h3>
                        <p class="inner-p">超燃！解放军智取马匪巢穴</p>
                    </div>
                </div>
            </div>
            <!-- 会员专享 -->
            <div class="column">
                <div class="title">
                    <h1>会员专享<span>开通会员看大片</span></h1>

                </div>
                <div class="column-box">
                    <!-- 列表的左边图 -->
                    <div class="column-left">
                        <div class="inner-img">
                            <div class="vip">
                                <b>会员</b>
                            </div>
                            <div class="jishu">
                                <h5>神探狄仁杰</h5>
                                <p><span>狄仁杰破获一桩桩恐怖案件</span><b>全50集</b></p>
                            </div>
                            <img src="https://i1.letvimg.com/lc03_iscms/202208/08/11/33/f24de950836b40bb85ba8de9d6712607.jpg"
                                alt="">
                        </div>
                    </div>
                    <!-- 列表右边的四部分 -->
                    <div class="column-right">
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <div class="vip">
                                        <b>会员</b>
                                    </div>
                                    <img src="https://i0.letvimg.com/lc04_iscms/202204/20/13/50/6ea0c9ab2d5443428f4f178b913d921b.jpg"
                                        alt="">
                                </div>
                                <h3>小别离</h3>
                                <p class="inner-p">黄磊张子枫父女情深</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <img src="https://i3.letvimg.com/lc05_iscms/202301/03/10/47/cc36b98eead2410c966dea8580ef3d29.gif"
                                        alt="">
                                </div>
                                <h3>猎金行动</h3>
                                <p class="inner-p">日军施刑追问宝藏线索</p>
                            </div>
                        </div>
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <div class="vip">
                                        <b>会员</b>
                                    </div>
                                    <img src="https://i3.letvimg.com/lc05_iscms/202204/15/16/24/46e2e432f3d141ef9ce8d04e15ffd27a.png"
                                        alt="">
                                </div>
                                <h3>济公传</h3>
                                <p class="inner-p">郭德纲变身济公当上救世主</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <div class="vip">
                                        <b>会员</b>
                                    </div>
                                    <img src="https://i1.letvimg.com/lc06_iscms/202303/27/10/36/230e9424d8ef482dba42e1b8f03f456b.jpg"
                                        alt="">
                                </div>
                                <h3>平凡英雄</h3>
                                <p class="inner-p">李冰冰冯绍峰上演极限营救</p>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!-- 电视剧 -->
            <div class="column">
                <div class="title">
                    <h1>电视剧<span>会员热播</span></h1>
                    <h2>电视剧排行榜</h2>
                </div>
                <div class="column-box">
                    <!-- 列表的左边图 -->
                    <div class="column-left">
                        <div class="inner-img">
                            <img src="https://i2.letvimg.com/lc04_iscms/202303/15/17/22/16a8eac32a864422b8a16903c40c3d71.jpg"
                                alt="">
                        </div>
                    </div>
                    <!-- 列表右边的四部分 -->
                    <div class="column-right">
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <img src="https://i1.letvimg.com/lc02_iscms/202303/20/21/25/623fb61affcf4208a467bc3a26b608ef.jpg"
                                        alt="">
                                </div>
                                <h3>生死翻盘</h3>
                                <p class="inner-p">吴其江王瑞子“潜伏”相爱相杀</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <img src="https://i3.letvimg.com/lc02_iscms/202301/31/11/11/69c92dc359aa4e7da81ca2b741f3fd79.gif"
                                        alt="">
                                </div>
                                <h3>精忠岳飞</h3>
                                <p class="inner-p">黄晓明演绎千古名将传奇</p>
                            </div>
                        </div>
                        <div class="column-right-inner">
                            <ul class="rank">
                                <li>
                                    <i class="num">1</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num2">2</i>
                                    <p class="rank-p">黄金大劫案</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num3">3</i>
                                    <p class="rank-p">三生三世十里桃花</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">4</i>
                                    <p class="rank-p">赵四</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">5</i>
                                    <p class="rank-p">尼古拉斯</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num4">6</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num4">7</i>
                                    <p class="rank-p">青春烈火</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">8</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">9</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                            </ul>
                            <div class="more">
                                <p>更多<i class="iconfont">&#xe678;</i></p>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!-- 电视剧下边的 -->
            <div class="column">
                <div class="column-box">
                    <div class="column-box2">
                        <div class="imgbox">
                            <img src="https://i2.letvimg.com/lc05_iscms/202303/30/14/18/662f1a293fbb4092946b9ad41647bc84.jpg"
                                alt="">
                        </div>
                        <h3>刀尖舞者</h3>
                        <p class="inner-p">女版伪装者赵飞燕</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc04_iscms/202207/15/10/50/e0226141dcf349bdbad5bc58ff5ed024.gif"
                                alt="">
                        </div>
                        <h3>刀尖舞者</h3>
                        <p class="inner-p">女版伪装者赵飞燕</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i0.letvimg.com/lc07_iscms/202207/28/17/18/289afab7a57d4542bea9a8c7cc70c810.jpg"
                                alt="">
                        </div>

                        <h3>刀尖舞者</h3>
                        <p class="inner-p">女版伪装者赵飞燕</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc05_iscms/202302/02/10/08/25fba3a32c69435b9234b7e9572ff3e3.jpg"
                                alt="">
                        </div>

                        <h3>刀尖舞者</h3>
                        <p class="inner-p">女版伪装者赵飞燕</p>
                    </div>
                </div>
            </div>
            <!-- 中间的大图片 -->
            <div class="bigimg">
                <img src="https://i3.letvimg.com/lc05_gugwl/202304/10/16/35/1.jpg" alt="">
            </div>
            <!-- 电影 -->
            <div class="column">
                <div class="title">
                    <h1>电影</h1>
                    <h2 class="movie-h2">电影排行榜</h2>
                </div>
                <div class="column-box flex-wrap">
                    <div class="column-box-inner2">
                       
                        <div class="imgbox2">
                            <div class="vip">
                                <b>会员</b>
                            </div>
                            <img src="https://i0.letvimg.com/lc04_iscms/202303/24/16/23/4fa8c78181de4b96b9ef370d2b309676.jpg"
                                alt="">
                        </div>
                        <h3>深海</h3>
                        <p class="inner-p">国漫佳作！温暖感人治愈人心</p>
                    </div>
                    <div class="column-box-inner">
                        <div class="imgbox2">
                            <div class="vip">
                                <b>会员</b>
                            </div>
                            <img src="https://i1.letvimg.com/lc05_iscms/202303/17/16/55/c2d5dbb3c1354e15bf2ae12c4c630bd2.jpg"
                                alt="">
                        </div>
                        <h3>中国乒乓</h3>
                        <p class="inner-p">国漫佳作！温暖感人治愈人心</p>
                    </div>
                    <div class="column-box-inner">
                        <div class="imgbox2">
                            <div class="vip">
                                <b>会员</b>
                            </div>
                            <img src="https://i3.letvimg.com/lc07_iscms/202302/20/16/25/02b091ba5d074daa983cce3a4c734237.jpg"
                                alt="">
                        </div>
                        <h3>想见你</h3>
                        <p class="inner-p">国漫佳作！温暖感人治愈人心</p>
                    </div>
                    <div class="column-box-inner">
                        <ul class="rank">
                            <li>
                                <i class="num">1</i>
                                <p class="rank-p">甄嬛传</p>
                                <span class="iconfont icon6">&#xe60d;</span>
                            </li>
                            <li>
                                <i class="num2">2</i>
                                <p class="rank-p">黄金大劫案</p>
                                <span class="iconfont icon6">&#xe60d;</span>
                            </li>
                            <li>
                                <i class="num3">3</i>
                                <p class="rank-p">三生三世十里桃花</p>
                                <span class="iconfont icon7">&#xe630;</span>
                            </li>
                            <li>
                                <i class="num4">4</i>
                                <p class="rank-p">赵四</p>
                                <span class="iconfont icon7">&#xe630;</span>
                            </li>
                            <li>
                                <i class="num4">5</i>
                                <p class="rank-p">尼古拉斯</p>
                                <span class="iconfont icon6">&#xe60d;</span>
                            </li>
                            <li>
                                <i class="num4">6</i>
                                <p class="rank-p">甄嬛传</p>
                                <span class="iconfont icon6">&#xe60d;</span>
                            </li>
                            <li>
                                <i class="num4">7</i>
                                <p class="rank-p">青春烈火</p>
                                <span class="iconfont icon7">&#xe630;</span>
                            </li>
                            <li>
                                <i class="num4">8</i>
                                <p class="rank-p">甄嬛传</p>
                                <span class="iconfont icon7">&#xe630;</span>
                            </li>
                            <li>
                                <i class="num4">9</i>
                                <p class="rank-p">甄嬛传</p>
                                <span class="iconfont icon6">&#xe60d;</span>
                            </li>
                        </ul>
                        <div class="more">
                            <p>更多<i class="iconfont">&#xe678;</i></p>
                        </div>
                    </div>
                    <div class="column-box-inner2">
                        <div class="imgbox2">
                            <img src="https://i2.letvimg.com/lc04_iscms/202304/04/18/00/0524555f6dd04dffa1a27a708b2fb3b0.jpg"
                                alt="">
                        </div>
                        <h3>下一任：前任</h3>
                        <p class="inner-p">国漫佳作！温暖感人治愈人心</p>
                    </div>
                    <div class="column-box-inner">
                        <div class="imgbox2">
                            <img src="https://i3.letvimg.com/vrs/201301/24/f6ce68c5ad794256a5634617368ff0f4.jpg"
                                alt="">
                        </div>
                        <h3>绝色武器</h3>
                        <p class="inner-p">国漫佳作！温暖感人治愈人心</p>
                    </div>
                    <div class="column-box-inner">
                        <div class="imgbox2">
                            <img src="https://i2.letvimg.com/lc03_isvrs/202302/24/14/00/0c230405-fa80-4ec0-afb7-4d9c96160d1e.jpg"
                                alt="">
                        </div>
                        <h3>土豪520</h3>
                        <p class="inner-p">国漫佳作！温暖感人治愈人心</p>
                    </div>
                    <div class="column-box-inner">
                        <div class="imgbox2">
                            <img src="https://i0.letvimg.com/lc04_isvrs/201611/22/17/35/5cf7b57e-f1c2-41ab-a6fc-db4954e2b6f5.jpg"
                                alt="">
                        </div>
                        <h3>记忆大师</h3>
                        <p class="inner-p">国漫佳作！温暖感人治愈人心</p>
                    </div>




                </div>
            </div>
            <!-- 院线速递 -->
            <div class="column">
                <div class="title">
                    <h1>院线速递</h1>
                </div>
                <div class="column-box">
                    <div class="column-box2">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc02_isvrs/202304/11/16/50/69c802a3-f749-46e8-85fe-100ce9e58eb7/thumb/2_400_225.jpg"
                                alt="">
                        </div>
                        <h3>《好像也没那么热血沸腾》预告</h3>
                        <p class="inner-p">魏翔扣篮遭遇“高能吐槽”</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc03_isvrs/202304/10/10/30/bb626711-8606-4581-95b1-408ccd7d8a58/thumb/2_400_225.jpg"
                                alt="">
                        </div>
                        <h3>超能一家人</h3>
                        <p class="inner-p">艾伦一家大战反派沈腾</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i2.letvimg.com/lc05_isvrs/202304/10/10/33/26d49be4-1d5f-412a-b8af-b37641a62718/thumb/2_400_225.jpg"
                                alt="">
                        </div>

                        <h3>《飞鸭向前冲》曝先导中字预告</h3>
                        <p class="inner-p">照明娱乐新作</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i0.letvimg.com/lc04_isvrs/202304/06/10/27/eb39ae1a-e556-4858-abcc-401e3ad9ae87/thumb/2_400_225.jpg"
                                alt="">
                        </div>

                        <h3>《小美人鱼》曝先导中字预告</h3>
                        <p class="inner-p">见证爱与勇敢</p>
                    </div>
                </div>
            </div>
            <!-- 动漫 -->
            <div class="column">
                <div class="title">
                    <h1>动漫<span>昨日热播</span><span>新上映</span><span>新上映</span><span>新上映</span><span>新上映</span><span>热播</span>
                    </h1>
                    <h2>动漫排行榜</h2>
                </div>
                <div class="column-box">
                    <!-- 列表的左边图 -->
                    <div class="column-left">
                        <div class="inner-img">
                            <img src="https://i0.letvimg.com/lc07_iscms/202302/23/10/52/e45330251478432c81bd357293a814eb.jpg"
                                alt="">
                        </div>
                    </div>
                    <!-- 列表右边的四部分 -->
                    <div class="column-right">
                        <div class="column-right-inner">
                            <div class="column-right-inner1">
                                <div class="imgbox">
                                    <img src="https://i1.letvimg.com/lc02_iscms/202303/20/21/25/623fb61affcf4208a467bc3a26b608ef.jpg"
                                        alt="">
                                </div>
                                <h3>生死翻盘</h3>
                                <p class="inner-p">吴其江王瑞子“潜伏”相爱相杀</p>
                            </div>
                            <div class="column-right-inner2">
                                <div class="imgbox">
                                    <img src="https://i3.letvimg.com/lc02_iscms/202301/31/11/11/69c92dc359aa4e7da81ca2b741f3fd79.gif"
                                        alt="">
                                </div>
                                <h3>精忠岳飞</h3>
                                <p class="inner-p">黄晓明演绎千古名将传奇</p>
                            </div>
                        </div>
                        <div class="column-right-inner">
                            <ul class="rank">
                                <li>
                                    <i class="num">1</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num2">2</i>
                                    <p class="rank-p">黄金大劫案</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num3">3</i>
                                    <p class="rank-p">三生三世十里桃花</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">4</i>
                                    <p class="rank-p">赵四</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">5</i>
                                    <p class="rank-p">尼古拉斯</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num4">6</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                                <li>
                                    <i class="num4">7</i>
                                    <p class="rank-p">青春烈火</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">8</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon7">&#xe630;</span>
                                </li>
                                <li>
                                    <i class="num4">9</i>
                                    <p class="rank-p">甄嬛传</p>
                                    <span class="iconfont icon6">&#xe60d;</span>
                                </li>
                            </ul>
                            <div class="more">
                                <p>更多<i class="iconfont">&#xe678;</i></p>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!-- 汽车 -->
            <div class="column">
                <div class="title">
                    <h1>汽车</h1>
                </div>
                <div class="column-box">
                    <div class="column-box2">
                        <div class="imgbox">
                            <img src="https://i0.letvimg.com/lc03_isvrs/202304/12/11/03/1d698d42-a880-479e-8074-54802674d0f7/thumb/2_960_540.jpg"
                                alt="">
                        </div>
                        <h3>比亚迪首发云辇控制系统</h3>
                        <p class="inner-p">只用三个轮子仍可平稳行驶</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc04_isvrs/202304/12/11/27/6f2c1309-c7ff-4fea-be54-ef0e90935825/thumb/2_400_225.jpg"
                                alt="">
                        </div>
                        <h3>极限掉头意义何在？</h3>
                        <p class="inner-p">坦克300越野实战视频</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i0.letvimg.com/lc02_isvrs/202304/12/11/42/0b5c9866-1751-412f-846a-4053dfcef3ce/thumb/2_400_225.jpg"
                                alt="">
                        </div>

                        <h3>极限掉头意义何在？</h3>
                        <p class="inner-p">坦克300越野实战视频</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i3.letvimg.com/lc04_isvrs/202304/12/11/42/60dbd641-45c8-41dc-98c6-8d9a141ec4f7/thumb/2_400_225.jpg"
                                alt="">
                        </div>

                        <h3>极限掉头意义何在？</h3>
                        <p class="inner-p">坦克300越野实战视频</p>
                    </div>
                </div>
            </div>
            <!-- 乐迷社区 -->
            <div class="column">
                <div class="title">
                    <h1>乐迷社区<span>群组</span><span>手机圈</span><span>电视圈</span><span>活动中心</span>
                    </h1>
                    <h4>猎奇</h4>
                </div>
                <div class="column-box">
                    <div class="column-box2">
                        <div class="imgbox">
                            <img src="https://i2.letvimg.com/lc03_iscms/202209/15/19/16/bd02cbee7c6b4f6f99843dd6d799ff9f.jpg"
                                alt="">
                        </div>
                        <h3>3千预算如何选智能电视？</h3>
                        <p class="inner-p">G75S性价比高，内容海量</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i3.letvimg.com/lc07_iscms/202209/15/19/18/1b50dacc74044854a25603ec4803d119.jpg"
                                alt="">
                        </div>
                        <h3>3千预算如何选智能电视？</h3>
                        <p class="inner-p">G75S性价比高，内容海量</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc05_isvrs/202301/31/11/12/5f764600-978f-4d3c-952c-0dd5c9c48959/thumb/2_400_225.jpg"
                                alt="">
                        </div>

                        <h3>3千预算如何选智能电视？</h3>
                        <p class="inner-p">G75S性价比高，内容海量</p>
                    </div>
                    <div class="column-box1">
                        <div class="imgbox">
                            <img src="https://i1.letvimg.com/lc05_isvrs/202301/31/11/12/5f764600-978f-4d3c-952c-0dd5c9c48959/thumb/2_400_225.jpg"
                                alt="">
                        </div>

                        <h3>3千预算如何选智能电视？</h3>
                        <p class="inner-p">G75S性价比高，内容海量</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 尾部区域内容 -->
        <div class="footer">

            <!-- 尾部区域上部分 -->
            <div class="center footer-top d_flex">
                <div class="footer-top-left">
                    <h4>乐视视频</h4>
                    <ul class="d_flex flex-wrap">
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                        <li>
                            <a href="">意见反馈</a>
                        </li>
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                        <li>
                            <a href="">意见反馈</a>
                        </li>
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                    </ul>

                </div>
                <div class="footer-top-center">
                    <h4>合作伙伴</h4>
                    <ul class="d_flex flex-wrap">
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                        <li>
                            <a href="">意见反馈</a>
                        </li>
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                        <li>
                            <a href="">意见反馈</a>
                        </li>
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                        <li>
                            <a href="">意见反馈</a>
                        </li>
                        <li>
                            <a href="">关于乐视</a>
                        </li>
                        <li>
                            <a href="">产品服务</a>
                        </li>
                        <li>
                            <a href="">意见反馈</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-top-right">
                    <h4>乐视动态</h4>
                    <ul>
                        <li>
                            <a href="">乐视电视“华影时光“升级</a>
                        </li>
                        <li>
                            <a href="">乐视召开新品发布会 推出Mini LED量子点电视和生态新品</a>
                        </li>
                        <li>
                            <a href="">乐视召开新品发布会 推出Mini LED量子点电视和生态新品</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 尾部区域下部分 -->
            <div class="footer-bottom">
                <p>
                    <img src="https://i2.letvimg.com/lc06_img/201602/29/16/21/ghs.png" alt="">
                    <span>京公网安备 11010502041856号</span>
                    <span>京ICP备09045969号-21</span>
                    <span>增值电信业务经营许可证:京ICP证060072号</span>
                    <span>信息网络传播视听节目许可证:0105097号</span>
                    <span>网络文化经营许可证：京网文【2022】0290-016号</span>

                </p>
                <p>
                    <span>互联网药品信息服务资格证书： (京)-经营性-2015-0012</span>
                    <span>网络出版服务许可证：（署）网出证（京）字第199号</span>
                    <span>广播电视节目制作经营许可证：（京）字第00208号</span>
                </p>
                <p>
                    <img src="https://i1.letvimg.com/img/201301/18/xy.png" alt="">
                    <span>中国互联网诚信联盟</span>
                    <img src="https://i3.letvimg.com/lc06_img/202005/14/18/37/www12377cn.png" alt="">
                    <span>网上有害信息举报中心</span>
                    <span>乐视内容举报平台</span>
                    <span>违法和不良信息举报电话（青少年守护热线）：010-85810900</span>
                    <span>举报邮箱：jubao@le.com</span>
                </p>
                <p>
                    <span>营业执照</span>
                    <span>Copyright © 2004-现在 乐视视频（le.com）All rights reserved.</span>
                </p>
            </div>

        </div>
        <!-- 固定定位的部分 -->
        <div class="aside">
            <div class="inner-top">
                <div class="aside-top">
                    <a href="">
                        <i class="iconfont">&#xec35;</i>
                    </a>
                </div>
                <div class="aside-top2">
                    <a href="">反馈</a>
                </div>
            </div>
            <div class="inner-bot">
                <div class="aside-bot">
                    <a href="#">
                        <i class="iconfont">&#xe631;</i>
                    </a>
                </div>
                <div class="aside-bot2">
                    <a href="#">顶部</a>
                </div>
            </div>


        </div>
        <!-- 滚轮事件的新导航 -->
        <div class="new-nav">
            <div class="new-nav-inner">
                <!-- logo区域 -->
                <div class="logo"></div>
                <div class="channel">
                    <div class="channel-inner"><i class="iconfont">&#xe60e;</i>导航
                        <div class="nav-pop">
                            <div class="triangle"></div>
                            <div class="nav-pop-top">
                                <ul class="nav-list">
                                    <li>电视剧</li>
                                    <li>古装</li>
                                    <li>动漫</li>
                                    <li>电影</li>
                                    <li>喜剧</li>
                                    <li>综艺</li>
                                    <li>情感</li>
                                    <li>自制剧</li>
                                    <li>爱情</li>
                                    <li>动作</li>
                                    <li>科幻</li>
                                    <li>动漫</li>
                                    <li>明星</li>
                                    <li>音乐</li>
                                </ul>
                                <ul class="navlist vip-list">
                                    <li><i class="iconfont">&#xe604;</i> 会员</li>
                                    <li>开通会员</li>
                                    <li>开通会员</li>
                                </ul>
                            </div>
                            <div class="nav-pop-bot">
                                <ul class="nav-list">
                                    <li>超级电视</li>
                                    <li>超级电视</li>
                                    <li>超级电视</li>
                                </ul>
                            </div>
                        </div> 
                    </div>
                   
                </div>
                <!-- 中间搜索 -->
                <div class="form">
                    <i class="iconfont icon1">&#xe651;</i>
                    <input type="text" placeholder="神探狄仁杰[热播]">
                    <div class="rank-outer">
                        <!-- 点击搜索框出现一个框 -->
                        <ul class="rank">
                            <h4>热门搜索</h4>
                            <li>
                                <i class="num">1</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num2">2</i>
                                <p class="rank-p">黄金大劫案</p>
                            </li>
                            <li>
                                <i class="num3">3</i>
                                <p class="rank-p">三生三世十里桃花</p>
                            </li>
                            <li>
                                <i class="num4">4</i>
                                <p class="rank-p">赵四</p>
                            </li>
                            <li>
                                <i class="num4">5</i>
                                <p class="rank-p">尼古拉斯</p>
                            </li>
                            <li>
                                <i class="num4">6</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num4">7</i>
                                <p class="rank-p">青春烈火</p>
                            </li>
                            <li>
                                <i class="num4">8</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num4">9</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                            <li>
                                <i class="num4">10</i>
                                <p class="rank-p">甄嬛传</p>
                            </li>
                        </ul>
                    </div>
                    <a href="" class="iconfont icon2">&#xe61c;</a>
                    <button>搜索</button>
                </div>
                <!-- 导航区域右边的四个 -->
                <div class="user">
                    <div class="user-item">
                        <a href="" class="nav-a">
                            <i class="iconfont icon3">&#xe604;</i>
                            <span>开通会员</span>
                        </a>
                    </div>
                    <div class="user-item">
                        <div class="nav-a">
                            <i class="iconfont icon3">&#xe600;</i>
                            <span>消息</span>
                            <div class="news">
                                <div class="triangle"></div>
                                <div class="news-inner">
                                    <ul class="options d_flex">
                                        <li class="show" data-index="0">活动</li>
                                        <li data-index="1">我的</li>
                                    </ul>
                                    <div class="content show">
                                        <div class="content-inner show">
                                            <img src="https://i0.letvimg.com/lc06_user/201611/09/10/34/2016110910343972182.jpg" alt="">
                                            <span>会员独享霍尼韦尔高端空净双十一爆底价减500元！..</span>
                                        </div>
                                        <div class="content-inner">
                                            <img src="https://i0.letvimg.com/lc06_user/201611/09/10/34/2016110910343972182.jpg" alt="">
                                            <span>乐视11月智能生态季，乐视商城配件跳水直降，全场..</span>
                                        </div>
                                        <p>【乐次元影视会员双11福利】乐次元脱单上上签，抽签100%有奖，奖品最低..</p>
                                        <div class="more">更多<i class="iconfont">&#xe678;</i></div>
                                    </div>
                                    <div class="content">
                                        <div class="content-inner2">
                                        <p>登录后才能查看全部消息哦～1111</p>
                                        <button>立即登录</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="user-item">
                        <a href="" class="nav-a">
                            <i class="iconfont icon3">&#xe6df;</i>
                            <span>看过</span>
                            <div class="record">
                                <div class="triangle"></div>
                                <div class="record-inner">
                                    <p>播放记录为空</p>
                                    <p>登陆后可同步移动设备和TV端播放记录，观看更方便哦～</p>
                                    <button>立即登录</button>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="user-item">
                        <a href="" class="nav-a">
                            <i class="iconfont icon3">&#xe60c;</i>
                            <span>未登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/swiper1.js"></script>
    <script src="./js/swiper2.js"></script>
    <script src="./js/onscroll.js"></script>
    <script src="./js/选项卡切换.js"></script>
    <script src="./js/搜索框.js"></script>
</body>
</html>